<template>
  <div class="hello">
    <div>
      <h2>欢迎光临呱呱的小店</h2>
      <div>请选择你的服务员</div>
    </div>
    <div>
      <button v-for="(item, index) in girls" :key="index" @click="girlsnumFun(index)">
        {{ item }}
      </button>
    </div>
    <div>当前选择的是 【{{ girlsnum }}】</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "dome1",
  setup() {
    // * ref 控制变量 在script使用的时候必须要加上value 在dom中vue3进行了一个转换可以不需要写
    /*
    ? ref的底层就是reactive    
    ? ref对象具有对应的getter和setter ， getter总是经过convert 转化后的响应式对象raw ,触发Vue 的依赖收集
    ? ref对象赋值会调用setter setter调用会通知deps，通知依赖这一状态的对象更新，并重新更新raw，raw被保存为新的响应式包装对象。
    */
    
    const girls = ref<string[] | number[]>(["服务员1", "服务员2", "服务员3"]);
    const girlsnum = ref<string | number>('');
    const girlsnumFun = (item: number) => {
      girlsnum.value = girls.value[item];
    };
    return {
      girls,
      girlsnum,
      girlsnumFun,
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
